<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stickyFooter</title>
    <style>
        html,
        body {
            height: 100%;
        }

        main {
            width: 100%;
            height: 100%;
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }

        section input:checked~p {
            display: none
        }

        .main>header,
        .main>section,
        .main>footer {
            padding: .1em calc(50% - 329px);
            text-align: justify;
            hyphens: auto;
        }

        header {
            text-align: center;
        }

        section {
            flex: 1;
        }

        footer {
            color: white;
            background: #747e7f;
        }
    </style>
</head>

<body>
    <main class="main">
        <header>
            <h1>Site Header</h1>
        </header>
        <section>
            <input id="con-1" type="checkbox" checked />
            <label for="con-1"><b>Toggle contents</b></label>
            <p>A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de
                dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of
                filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de
                dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.</p>
            <p>A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de
                dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of
                filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de
                dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La
                la la de dah de dah de dah de la.A paragraph of filler text.</p>
            <p>A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de
                dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.A paragraph of
                filler text. La la la de dah de dah de dah de la.A paragraph of filler text. La la la de dah de dah de
                dah de la.A paragraph of filler text. La la la de dah de dah de dah de la.</p>
        </section>
        <footer>
            <p>© 2018 LHammer</p>
            <p>CSS Tricks need to know for web developer.</p>
        </footer>
    </main>
</body>

</html>